<template>

    <el-card shadow="never" class="border-0">
        <!-- 搜索 -->


        <!-- 新增|刷新 -->
        <ListHeader layout="create,refresh" @create="handleCreate" @refresh="getList" @delete="handleMultiDelete">
            <!-- <el-popconfirm
                  v-if="searchForm.types != ''"
                  title="是否要继续操作选中记录？"
                  confirmButtonText="确认"
                  cancelButtonText="取消"
                  @confirm="handleMultiData(null,{agree: true})"
                >
                  <template #reference>
                    <el-button type="warning" size="small">
                      <el-icon class="el-icon--left" :size="16">
                        <Finished />
                      </el-icon>
                      <span v-if="searchForm.types == 'delete'">批量恢复</span>
                      <span v-if="searchForm.types == 'pass'">批量分发</span>
                      <span v-else-if="searchForm. types == 'distribute'">撤回分发</span>
                      <span v-else>批量提交</span>
                    </el-button>
                  </template>
</el-popconfirm> -->
        </ListHeader>

        <!-- 折叠列表 -->
        <div>
            <el-input v-model="filterText" placeholder="输入关键字查询" />

            <el-tree ref="treeRef" class="filter-tree" :data="tableData" show-checkbox :props="defaultProps"
                default-expand-all :filter-node-method="filterNode">

                <template #default="{ node, data }">
                    <span class="custom-tree-node">
                        <span>{{ node.label }}</span>
                        <span>


                            <el-button @click="handleEdit(data)" text type="primary" class="p-1">
                                <el-icon class="el-icon--left" :size="16">
                                    <Edit />
                                </el-icon>修改
                            </el-button>


                            <el-popconfirm title="是否要删除？" confirmButtonText="确认" cancelButtonText="取消"
                                @confirm="remove(node, data)">
                                <template #reference>
                                    <el-button text type="danger" class="p-1">
                                        <el-icon class="el-icon--left" :size="16">
                                            <Delete />
                                        </el-icon>删除
                                    </el-button>
                                </template>
                            </el-popconfirm>

                            <!-- <a style="margin-left: 8px" @click="handleEdit(data)"> <el-icon class="el-icon--left"
                                    :size="16">
                                    <Edit />
                                </el-icon>修改 </a>
                            <a style="margin-left: 8px" @click="remove(node, data)">

                                <el-icon class="el-icon--left" :size="16">
                                    <Delete />
                                </el-icon>删除 </a> -->
                        </span>
                    </span>
                </template>
            </el-tree>
        </div>

        <FormDrawer destroyOnClose ref="formDrawerRef" :title="drawerTitle" @submit="handleSubmit" size="30%">
            <el-form :model="form" ref="formRef" :rules="rules" label-width="80px" :inline="false">

                <el-form-item label="父级">
                    <el-select filterable clearable v-model="form.parent_id" class="input-width" placeholder="父级菜单">
                        <el-option key="0" label="默认顶级" value="0"></el-option>
                        <el-option v-for="item in tableData" :key="item.id" :label="item.name"
                            :value="item.id"></el-option>
                    </el-select>
                </el-form-item>

                <el-form-item label="名称" prop="name">
                    <el-input v-model="form.name" placeholder="菜单名称" class="input-width"></el-input>
                </el-form-item>

                <el-form-item label="图标" prop="icon">
                    <IconSelect v-model="form.icon" />
                </el-form-item>

                <el-form-item label="请求方法" prop="method">
                    <el-input v-model="form.method" placeholder="请求方法:GET|POST|PUT|DELETE"
                        class="input-width"></el-input>
                </el-form-item>

                <el-form-item label="后端路由" prop="href">
                    <el-input v-model="form.href" placeholder="后端路由" class="input-width"></el-input>
                </el-form-item>

                <el-form-item label="前端路由" prop="frontpath">
                    <el-input v-model="form.frontpath" placeholder="前端路由" class="input-width"></el-input>
                </el-form-item>

                <!-- <el-form-item label="描述" prop="desc">
                    <el-input v-model="form.desc" placeholder="描述" class="input-width"></el-input>
                </el-form-item> -->

                <el-form-item label="排序" prop="order">
                    <el-input v-model="form.order" placeholder="排序" type="number" class="input-width"></el-input>
                </el-form-item>

                <el-form-item label="状态" prop="status">
                    <el-switch v-model="form.status"></el-switch>
                </el-form-item>

                <el-form-item label="是否菜单" prop="is_menu">
                    <el-switch v-model="form.is_menu"></el-switch>
                </el-form-item>

            </el-form>
        </FormDrawer>

    </el-card>




</template>
<script setup>
// vue方法
import { ref, watch } from 'vue'
import { ElTree } from 'element-plus'

// 页面组件
import Search from '~/components/SearchForm.vue'
import SearchItem from '~/components/SearchItem.vue'
import ListHeader from '~/components/ListHeader.vue'
import FormDrawer from '~/components/FormDrawer.vue'
import IconSelect from '~/components/IconSelect.vue'

// 公共方法
import { useInitTable, useInitForm } from '~/composables/useCommon'

// 请求api
import { getMenusList, postMenus } from '~/api/system/menu'


// 菜单数据
const filterText = ref('')
const treeRef = ref('')
const defaultProps = { label: 'name', childern: "childern" }

watch(filterText, (val) => {
    treeRef.value = !treeRef.value.filter(val)
})

const filterNode = (value, data) => {
    console.log(data)

    if (!value) return true
    return data.name.includes(value)
}



// 初始化表格和表单
const {
    searchForm,
    resetSearchForm,
    tableData,
    total,
    getList,
    handleMultiDelete,
} = useInitTable({
    searchForm: { search: '' },
    requestListAPI: getMenusList,
    // upMultiData: patchMediasData,
    // upMultiSubmit: patchMediasData,
    // requestDeleteAPI: deleteM,
    pageSize: 10,
    onGetListSuccess: res => {
        tableData.value = res.data
    },
    onUpdateStatusSuccess: (row, status) => {
        row.status = status
    },
})
const {
    formDrawerRef,
    formRef,
    form,
    rules,
    handleCreate,
    handleSubmit,
    handleEdit,
    drawerTitle,
} = useInitForm({
    getList,
    // update: putMedias,
    create: postMenus,
    form:
    {
        name: "",
        icon: "",
        href: "",
        method: "",
        frontpath: null,
        desc: "",
        order: 50,
        status: 0,
        is_menu: 0,
        parent_id: "",
    },
    rules: {
        name: [
            {
                required: true,
                message: '菜单名称不能为空',
                trigger: 'blur',
            },
        ],
        desc: [
            {
                required: true,
                message: '描述不能为空',
                trigger: 'blur',
            },
        ],
        order: [
            {
                required: true,
                message: '排序不能为空',
                trigger: 'blur',
            },
        ],
    },
})


// 删除
const remove = (node, data) => {
    const parent = node.parent
    const children = parent.data.children || parent.data
    const index = children.findIndex((d) => d.id === data.id)
    children.splice(index, 1)
    dataSource.value = [...dataSource.value]
}


</script>

<style scoped>
.custom-tree-node {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 14px;
    padding-right: 8px;
}

.el-select .el-input {
    width: 130px;
}

.input-with-select .el-input-group__prepend {
    background-color: #fff;
}
</style>
